<template>
  <!--
    操作轨迹
  -->
  <el-dialog
    :visible="visible"
    title="操作轨迹"
    top="100px"
    width="500px"
    append-to-body
    @close="dialogToggle(false)"
  >
    <ul>
      <template v-if="data.length">
        <li v-for="(item, index) of data" :key="'history-' + index" class="history">
          <div :class="['history-time', item.actionType]">
            <p class="font-14">{{datetimeFormat(item.timestamp, 'YYYY-MM-DD')}}</p>
            <p class="font-12 color-gray text-right m-top-xs">{{datetimeFormat(item.timestamp, 'HH:mm:ss')}}</p>
          </div>
          <div class="history-detail p-hor-sm">
            <p class="font-12 color-gray">{{item.actionType | typeString}}</p>
            <p class="m-top-xs text-multi-ellipsis--l2" :title="item.text">条款{{item.indexsToString}}：{{item.text}}</p>
          </div>
        </li>
      </template>
      <template v-else>
        <li class="text-center color-gray">暂无操作记录</li>
      </template>
    </ul>
  </el-dialog>
</template>

<script>
import dayjs from '@/assets/plugins/dayjs';

export default {
  name: 'EditHistory',
  props: {
    data: {type: Array, default: () => ([])}
  },
  data() {
    return {
      visible: false,
      list: [
        // {
        //   id: 709,
        //   type: 'text',
        //   text: '甲方应当按合同约定及时付款，若甲方逾期仍不付款的。',
        //   isEdit: true,
        //   isDelete: true,
        //   timestamp: '2018-04-15 12:22:10',
        //   actionType: 'add' // add | edit | delete
        // }
      ]
    };
  },
  methods: {
    dialogToggle(visible) {
      this.visible = visible;
    },

    // 日期格式化
    datetimeFormat(time, format) {
      return dayjs(time).format(format);
    }
  },
  filters: {
    type(value) {
      let result = '';
      switch (value) {
        case 'add':
          result = 'success';
          break;
        case 'edit':
          result = 'primary';
          break;
        case 'delete':
          result = 'danger';
          break;
        default:
          result = '';
          break;
      }
      return result;
    },
    typeString(value) {
      let result = '';
      switch (value) {
        case 'add':
          result = '新增';
          break;
        case 'edit':
          result = '编辑';
          break;
        case 'delete':
          result = '删除';
          break;
        default:
          result = '';
          break;
      }
      return result;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/css/modules/_variable.scss";

.history {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}
.history-time {
  flex: 0 0 auto;
  padding-right: 8px;
  border-right: 2px solid $primary;
  &.add { border-color: $success; }
  &.edit { border-color: $primary; }
  &.delete { border-color: $danger; }
}
.history-detail {
  flex: 1 1 auto;
}
</style>
